<template>
  <div class="help-container">
    <!-- 顶部导航栏 - 与评审页面保持一致 -->
    <header class="top-nav">
      <div class="logo-title">
        <h1>吉林油田公司科学技术奖网评系统</h1>
      </div>
      <div class="user-info-container">
        <el-dropdown @command="handleUserCommand">
          <span class="user-info">
            <i class="el-icon-user-circle"></i>
            <span class="username">{{ currentUser.name }}</span>
            <span class="specialty-tag">{{ currentUser.specialty }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="back">
              <i class="el-icon-arrow-left"></i> 返回评审
            </el-dropdown-item>
            <el-dropdown-item command="logout" divided>
              <i class="el-icon-switch-button"></i> 退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>

    <!-- 页面标题 -->
    <div class="page-header">
      <h2>使用帮助</h2>
      <p class="page-description">
        吉林油田公司科学技术奖网评系统操作指南
      </p>
    </div>

    <!-- 帮助内容区 -->
    <div class="help-content">
      <!-- 侧边导航 -->
      <div class="help-sidebar">
        <el-menu
            default-active="overview"
            class="help-menu"
            @select="handleMenuSelect"
        >
          <el-menu-item index="overview">
            <i class="el-icon-info"></i>
            <span slot="title">系统概述</span>
          </el-menu-item>
          <el-menu-item index="review-process">
            <i class="el-icon-flow-chart"></i>
            <span slot="title">评审流程</span>
          </el-menu-item>
          <el-menu-item index="scoring">
            <i class="el-icon-calculator"></i>
            <span slot="title">评分操作</span>
          </el-menu-item>
          <el-menu-item index="filter-sort">
            <i class="el-icon-sort"></i>
            <span slot="title">筛选与排序</span>
          </el-menu-item>
          <el-menu-item index="submission">
            <i class="el-icon-check-circle"></i>
            <span slot="title">提交评审</span>
          </el-menu-item>
          <el-menu-item index="faq">
            <i class="el-icon-question-circle"></i>
            <span slot="title">常见问题</span>
          </el-menu-item>
          <el-menu-item index="contact">
            <i class="el-icon-phone"></i>
            <span slot="title">联系支持</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 主内容区 -->
      <div class="help-main">
        <!-- 系统概述 -->
        <div v-if="activeSection === 'overview'" class="help-section">
          <h3>系统概述</h3>
          <p>吉林油田公司科学技术奖网评系统是专为公司内部科技项目评审设计的在线平台，旨在简化评审流程，提高评审效率和公正性。</p>

          <div class="help-card">
            <h4>系统主要功能</h4>
            <ul class="feature-list">
              <li>
                <i class="el-icon-check"></i>
                <span>项目信息查看与评审打分</span>
              </li>
              <li>
                <i class="el-icon-check"></i>
                <span>多维度评分标准参考</span>
              </li>
              <li>
                <i class="el-icon-check"></i>
                <span>项目筛选与排序</span>
              </li>
              <li>
                <i class="el-icon-check"></i>
                <span>评审进度跟踪</span>
              </li>
              <li>
                <i class="el-icon-check"></i>
                <span>批量提交评审结果</span>
              </li>
            </ul>
          </div>

          <div class="help-card">
            <h4>评审周期</h4>
            <p>系统登录有效期为24小时，超时后需要重新验证身份。请在规定时间内完成所有分配项目的评审工作。</p>
          </div>
        </div>

        <!-- 评审流程 -->
        <div v-if="activeSection === 'review-process'" class="help-section">
          <h3>评审流程</h3>
          <p>项目评审工作分为以下几个步骤，请按顺序完成：</p>

          <div class="process-steps">
            <div class="step-item">
              <div class="step-number">1</div>
              <div class="step-content">
                <h4>登录系统</h4>
                <p>使用您收到的评审编码，通过验证页面登录系统。</p>
              </div>
            </div>
            <div class="step-divider"></div>

            <div class="step-item">
              <div class="step-number">2</div>
              <div class="step-content">
                <h4>查看分配项目</h4>
                <p>登录后系统会显示分配给您的所有待评审项目。</p>
              </div>
            </div>
            <div class="step-divider"></div>

            <div class="step-item">
              <div class="step-number">3</div>
              <div class="step-content">
                <h4>逐项评审打分</h4>
                <p>对每个项目的不同维度进行评分，参考系统提供的评分标准。</p>
              </div>
            </div>
            <div class="step-divider"></div>

            <div class="step-item">
              <div class="step-number">4</div>
              <div class="step-content">
                <h4>检查评审结果</h4>
                <p>确认所有项目均已完成评审，查看评审进度和分数统计。</p>
              </div>
            </div>
            <div class="step-divider"></div>

            <div class="step-item">
              <div class="step-number">5</div>
              <div class="step-content">
                <h4>提交评审结果</h4>
                <p>完成所有评审后，点击"全部提交"按钮提交最终结果。</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 评分操作 -->
        <div v-if="activeSection === 'scoring'" class="help-section">
          <h3>评分操作</h3>
          <p>对项目进行评分是评审工作的核心环节，系统将从三个维度进行评价：</p>

          <div class="help-card">
            <h4>评分维度说明</h4>
            <table class="scoring-table">
              <thead>
              <tr>
                <th>评分维度</th>
                <th>满分值</th>
                <th>说明</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>立项背景</td>
                <td>20分</td>
                <td>评估项目的立项背景、业务需求和重要性</td>
              </tr>
              <tr>
                <td>创新点</td>
                <td>40分</td>
                <td>评估项目的技术创新性和先进性</td>
              </tr>
              <tr>
                <td>经济效益</td>
                <td>40分</td>
                <td>评估项目的经济效益和推广应用价值</td>
              </tr>
              </tbody>
            </table>
          </div>

          <div class="help-card">
            <h4>评分操作步骤</h4>
            <ol class="operation-steps">
              <li>
                <p>在项目列表中，找到需要评分的项目，点击对应维度下的"-"或已有分数</p>
                <div class="step-image">
                  <el-image
                      src="https://picsum.photos/id/0/600/300"
                      alt="点击评分单元格示例"
                      fit="contain"
                  ></el-image>
                </div>
              </li>
              <li>
                <p>在弹出的评分对话框中，查看项目相关内容详情</p>
                <p>可点击"展开全部"查看完整内容，点击"查看评分标准"参考打分依据</p>
              </li>
              <li>
                <p>通过数字输入框或上下箭头选择合适的分数</p>
              </li>
              <li>
                <p>完成后点击"保存"按钮保存当前评分</p>
              </li>
            </ol>
          </div>

          <div class="tip-box">
            <i class="el-icon-lightbulb"></i>
            <p><strong>提示：</strong>只有三个维度的评分都完成后，项目状态才会变为"已评审"。您可以分多次完成不同维度的评分。</p>
          </div>
        </div>

        <!-- 筛选与排序 -->
        <div v-if="activeSection === 'filter-sort'" class="help-section">
          <h3>筛选与排序</h3>
          <p>系统提供了灵活的筛选和排序功能，帮助您更高效地管理评审工作。</p>

          <div class="help-card">
            <h4>项目筛选</h4>
            <p>您可以通过以下方式筛选项目：</p>
            <ol class="operation-steps">
              <li>
                <p>通过"评审状态"下拉菜单筛选不同状态的项目：</p>
                <ul class="sub-list">
                  <li>全部项目：显示所有分配给您的项目</li>
                  <li>未评审：只显示尚未开始评审的项目</li>
                  <li>评审中：只显示部分完成评审的项目</li>
                  <li>已评审：只显示全部完成但未提交的项目</li>
                  <li>已提交：只显示已提交的项目</li>
                </ul>
              </li>
              <li>
                <p>通过搜索框输入关键词，筛选项目名称中包含该关键词的项目</p>
              </li>
            </ol>
          </div>

          <div class="help-card">
            <h4>项目排序</h4>
            <p>您可以通过"排序方式"下拉菜单选择不同的排序方式：</p>
            <ul class="sub-list">
              <li>默认顺序：按系统分配的项目顺序排列</li>
              <li>申报等级（高→低）：按项目申报等级从高到低排列</li>
              <li>申报等级（低→高）：按项目申报等级从低到高排列</li>
              <li>评审分数（高→低）：按已评审项目的总分从高到低排列</li>
              <li>评审分数（低→高）：按已评审项目的总分从低到高排列</li>
            </ul>
          </div>

          <div class="tip-box">
            <i class="el-icon-lightbulb"></i>
            <p><strong>提示：</strong>筛选和排序条件可以组合使用，帮助您快速找到需要优先评审的项目。</p>
          </div>
        </div>

        <!-- 提交评审 -->
        <div v-if="activeSection === 'submission'" class="help-section">
          <h3>提交评审</h3>
          <p>完成所有项目的评审后，需要提交您的评审结果。提交后将无法再修改评分。</p>

          <div class="help-card">
            <h4>提交前检查</h4>
            <p>提交前请确认：</p>
            <ul class="check-list">
              <li>
                <i class="el-icon-circle-check"></i>
                <span>所有项目均已完成评审（状态为"已评审"）</span>
              </li>
              <li>
                <i class="el-icon-circle-check"></i>
                <span>评分进度显示为100%</span>
              </li>
              <li>
                <i class="el-icon-circle-check"></i>
                <span>所有分数均已仔细核对，无需修改</span>
              </li>
            </ul>
          </div>

          <div class="help-card">
            <h4>提交步骤</h4>
            <ol class="operation-steps">
              <li>
                <p>在评审进度栏中，点击"全部提交"按钮</p>
                <div class="step-image">
                  <el-image
                      src="https://picsum.photos/id/180/600/100"
                      alt="全部提交按钮位置"
                      fit="contain"
                  ></el-image>
                </div>
              </li>
              <li>
                <p>在弹出的确认对话框中，查看评审结果摘要（平均分、最高分、最低分）</p>
              </li>
              <li>
                <p>确认无误后，点击"确认提交"按钮</p>
              </li>
              <li>
                <p>提交成功后，系统将自动退出并返回登录页面</p>
              </li>
            </ol>
          </div>

          <div class="warning-box">
            <i class="el-icon-warning"></i>
            <p><strong>注意：</strong>提交后，您的评审编码将失效，无法再次登录系统修改评审结果。请确保所有评审工作已完成并检查无误。</p>
          </div>
        </div>

        <!-- 常见问题 -->
        <div v-if="activeSection === 'faq'" class="help-section">
          <h3>常见问题</h3>

          <el-collapse accordion class="faq-accordion">
            <el-collapse-item title="登录后发现没有分配项目，怎么办？">
              <div class="faq-content">
                <p>如果登录后没有看到分配的项目，请先确认您使用的评审编码正确无误。如编码正确但仍无项目，请联系系统管理员核实您的评审权限和项目分配情况。</p>
              </div>
            </el-collapse-item>

            <el-collapse-item title="如何保存我的评分进度？">
              <div class="faq-content">
                <p>在每个评分对话框中完成打分后，点击"保存"按钮即可保存当前评分。系统会自动更新项目状态，并在您下次登录时保留已完成的评分。</p>
              </div>
            </el-collapse-item>

            <el-collapse-item title="可以修改已经保存的评分吗？">
              <div class="faq-content">
                <p>在点击"全部提交"之前，您可以随时修改已保存的评分。只需再次点击对应项目的分数单元格，修改分数后重新保存即可。提交后将无法修改。</p>
              </div>
            </el-collapse-item>

            <el-collapse-item title="系统提示登录已过期怎么办？">
              <div class="faq-content">
                <p>系统登录有效期为24小时。如果收到登录过期提示，请使用您的评审编码重新登录系统。已完成的评分会自动保存，您可以继续完成剩余评审工作。</p>
              </div>
            </el-collapse-item>

            <el-collapse-item title="提交评审后发现有误，如何修改？">
              <div class="faq-content">
                <p>评审结果提交后将无法通过系统自行修改。如确需修改，请立即联系系统管理员说明情况，管理员可在后台取消您的提交状态，以便您重新登录修改。</p>
              </div>
            </el-collapse-item>

            <el-collapse-item title="项目详情内容太多，如何快速查看？">
              <div class="faq-content">
                <p>在评分对话框中，项目详情默认显示部分内容。点击"展开全部"可以查看完整内容，阅读完毕后可点击"收起"按钮精简显示。</p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <!-- 联系支持 -->
        <div v-if="activeSection === 'contact'" class="help-section">
          <h3>联系支持</h3>
          <p>如果您在使用系统过程中遇到任何问题或有建议，可通过以下方式联系支持团队：</p>

          <div class="contact-card">
            <div class="contact-item">
              <i class="el-icon-phone"></i>
              <div class="contact-info">
                <h4>电话支持</h4>
                <p>工作时间：工作日 8:30-17:30</p>
                <p>联系电话：0438-XXXXXXX</p>
              </div>
            </div>

            <div class="contact-item">
              <i class="el-icon-message"></i>
              <div class="contact-info">
                <h4>邮件支持</h4>
                <p>发送问题描述至：support@jlyt-techaward.com</p>
                <p>我们将在24小时内回复您的邮件</p>
              </div>
            </div>

            <div class="contact-item">
              <i class="el-icon-user"></i>
              <div class="contact-info">
                <h4>现场支持</h4>
                <p>地址：地球物理勘探研究院 302室</p>
                <p>联系人：王工程师</p>
              </div>
            </div>
          </div>

          <div class="help-card">
            <h4>问题反馈须知</h4>
            <p>联系我们时，请尽量提供以下信息，以便我们更快解决您的问题：</p>
            <ul class="sub-list">
              <li>您的姓名和评审编号</li>
              <li>问题发生的时间</li>
              <li>问题的详细描述</li>
              <li>相关截图（如有）</li>
              <li>您已尝试过的解决方法</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚信息 -->
    <div class="login-footer">
      <p>© 2025 吉林油田公司科学技术奖网评系统 版权所有</p>
      <p class="footer-links">
        <a href="#" class="footer-link">使用帮助</a>
        <span class="divider">|</span>
        <a href="#" class="footer-link">联系我们</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelpPage',
  data() {
    return {
      activeSection: 'overview',
      currentUser: {
        name: '',
        specialty: ''
      }
    };
  },

  created() {
    // 获取当前用户信息
    this.loadUserInfo();
  },

  methods: {
    // 加载用户信息
    loadUserInfo() {
      const savedUser = localStorage.getItem('currentUser');
      if (savedUser) {
        try {
          const userData = JSON.parse(savedUser);
          this.currentUser = {
            name: userData.name || '',
            specialty: userData.specialty || ''
          };
        } catch (error) {
          console.error('解析用户信息失败', error);
        }
      }
    },

    // 处理菜单选择
    handleMenuSelect(index) {
      this.activeSection = index;
      // 滚动到顶部
      window.scrollTo(0, 0);
    },

    // 处理用户菜单命令
    handleUserCommand(command) {
      if (command === 'back') {
        // 返回评审页面
        this.$router.push('/review');
      } else if (command === 'logout') {
        this.handleLogout();
      }
    },

    // 处理退出登录
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除登录信息
        localStorage.removeItem('currentUser');
        localStorage.removeItem('loginTimestamp');
        // 跳转到登录页面
        this.$router.push('/auth');
        this.$message.success('已退出登录');
      }).catch(() => {
        // 取消退出
        console.log('用户取消退出登录');
      });
    }
  }
};
</script>

<style scoped>
/* 主容器样式 */
.help-container {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 - 复用评审页面样式 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1890ff;
  color: white;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-title h1 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 600;
}

.user-info-container {
  margin-left: auto;
}

.user-info {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
  color: white;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-info .el-icon-user-circle {
  font-size: 1.2rem;
  margin-right: 8px;
  color: white;
}

.username {
  margin-right: 8px;
  color: white;
}

.specialty-tag {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  margin-right: 8px;
  color: white;
}

.user-info .el-icon-arrow-down {
  color: white;
}

/* 页面标题 */
.page-header {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  background-color: white;
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: #1f2329;
  font-size: 1.8rem;
}

.page-description {
  margin: 0;
  color: #86909c;
  font-size: 0.9rem;
}

/* 帮助内容区 */
.help-content {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
}

/* 侧边导航 */
.help-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.help-menu {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 主内容区 */
.help-main {
  flex: 1;
  background-color: white;
  border-radius: 4px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-height: calc(100vh - 200px);
}

.help-section h3 {
  color: #1f2329;
  font-size: 1.5rem;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.help-card {
  background-color: #f9fafb;
  border-radius: 6px;
  padding: 20px;
  margin: 15px 0;
  border: 1px solid #f0f2f5;
}

.help-card h4 {
  margin-top: 0;
  color: #1f2329;
  font-size: 1.1rem;
}

/* 功能列表 */
.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-left: 5px;
}

.feature-list li i {
  color: #52c41a;
  margin-right: 8px;
  margin-top: 4px;
}

/* 流程步骤 */
.process-steps {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.step-item {
  display: flex;
  margin-bottom: 20px;
}

.step-number {
  width: 36px;
  height: 36px;
  background-color: #1890ff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin-top: 0;
  margin-bottom: 5px;
  color: #1f2329;
}

.step-divider {
  height: 20px;
  width: 1px;
  background-color: #e8e8e8;
  margin-left: 17px;
  margin-bottom: 10px;
}

/* 操作步骤 */
.operation-steps {
  padding-left: 20px;
  margin: 10px 0;
}

.operation-steps li {
  margin-bottom: 15px;
  line-height: 1.6;
}

.step-image {
  margin: 10px 0;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 10px;
}

/* 子列表 */
.sub-list {
  padding-left: 20px;
  margin: 10px 0;
}

.sub-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 检查列表 */
.check-list {
  list-style: none;
  padding: 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.check-list li i {
  color: #1890ff;
  margin-right: 10px;
  margin-top: 3px;
}

/* 评分表格 */
.scoring-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.scoring-table th,
.scoring-table td {
  border: 1px solid #e8e8e8;
  padding: 12px 15px;
  text-align: left;
}

.scoring-table th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.scoring-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 提示和警告框 */
.tip-box {
  background-color: #e6f7ff;
  border-left: 4px solid #1890ff;
  padding: 12px 15px;
  margin: 15px 0;
  display: flex;
  align-items: flex-start;
}

.tip-box i {
  color: #1890ff;
  margin-right: 10px;
  margin-top: 3px;
  font-size: 1.2rem;
}

.warning-box {
  background-color: #fff7e6;
  border-left: 4px solid #faad14;
  padding: 12px 15px;
  margin: 15px 0;
  display: flex;
  align-items: flex-start;
}

.warning-box i {
  color: #faad14;
  margin-right: 10px;
  margin-top: 3px;
  font-size: 1.2rem;
}

/* FAQ 折叠面板 */
.faq-accordion {
  margin: 15px 0;
}

.faq-content {
  padding: 10px 0;
  line-height: 1.6;
}

/* 联系卡片 */
.contact-card {
  margin: 15px 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid #f0f2f5;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item i {
  font-size: 1.5rem;
  color: #1890ff;
  margin-right: 15px;
  margin-top: 3px;
  flex-shrink: 0;
}

.contact-info h4 {
  margin-bottom: 8px;
}

.contact-info p {
  margin: 5px 0;
  color: #4e5969;
}

/* 页脚样式 */
.login-footer {
  background-color: #1890ff;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: auto;
}

.login-footer p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.footer-links {
  margin-top: 10px;
}

.footer-link {
  color: white;
  margin: 0 5px;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

.divider {
  margin: 0 5px;
  color: rgba(255, 255, 255, 0.7);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .help-content {
    flex-direction: column;
  }

  .help-sidebar {
    width: 100%;
  }

  .help-main {
    padding: 15px;
  }

  .process-steps {
    padding-left: 10px;
  }

  .scoring-table th,
  .scoring-table td {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
}
</style>
